<template>
  <div style="padding:20px">
    <el-card>
      <h1>召唤师技能列表</h1>
      <el-table :data="$store.state.skills"
                border
                max-height="700px"
                stripe>
        <el-table-column type="expand">
          <template slot-scope="scope">
            <div style="margin-left:50px">
              <h1>【技能展示】</h1>
              <img v-for="(item, i) in scope.row.picture"
                   :key="i"
                   :src="$upload+'/'+item">
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="name"
                         label="技能名称"
                         width="120"></el-table-column>
        <el-table-column prop="level"
                         label="解锁等级"
                         width="120"></el-table-column>
        <el-table-column prop="icon"
                         label="技能图片"
                         width="100">
          <template slot-scope="scope">
            <img :src="$upload+'/'+scope.row.icon"
                 style="height:3rem;width:3rem">
          </template>
        </el-table-column>
        <el-table-column prop="descript"
                         label="技能描述"></el-table-column>
        <el-table-column fixed="right"
                         label="操作"
                         width="180">
          <template slot-scope="scope">
            <el-button type="primary"
                       size="small"
                       @click="edit(scope.row)">编辑</el-button>
            <el-button type="primary"
                       size="small"
                       @click="remove(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

  </div>
</template>

<script>
export default {
  methods: {
    async remove (row) {
      this.$confirm(`是否确定删除技能?"${row.name}"`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        await this.$http.delete(`rest/Skill/${row._id}`).then(res => {
          if (res.status !== 200) {
            return this.$message.error('删除失败！')
          }
          this.$store.commit('deleteSkill', row._id)
          this.$message.success('删除成功！')
        })
      })
    },
    edit (row) {
      window.sessionStorage.setItem('activePath', '/skill/create')
      this.$router.push(`/skill/edit/${row._id}`)
    }
  }
}
</script>
